<template>
  <div>
    <h2 align="center">注册页面</h2>
      <table class="table table-borderd">
          <tr>
            <td align="right">用户名:</td>
            <td><input type="text" v-model="state.userName"/></td>
          </tr>
          <tr>
            <td align="right">密码：</td>
            <td><input type="password" v-model="state.userPwd"/></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="button" @click="register" value="注册" class="btn btn-success"/></td>
          </tr>
      </table>
  </div>
</template>

<script setup lang="ts">
  import { reactive,toRefs} from 'vue'
  import axios from 'axios';
  import { useRouter} from "vue-router"
  //路由器
  const router = useRouter();
  //数据--------------------------------
  let data = reactive({
    state:{
      userName:'',
      userPwd:''
    }
  })

  let {state} = toRefs(data)



  //函数--------------------------
  const register = ()=>{

    //1.判断非空
    let reg = /^[a-zA-Z]\w{5,15}$/
    //判断用户名是否为空
    if(state.value.userName == ""){
      alert("用户名不能为空");
      return;
    }

    //判断密码不能为空
    if(state.value.userPwd == ""){
      alert("密码不能为空");
      return;
    }

    //密码由英文字母下划线组成不能以数字开头6-16位
    if(reg.test(state.value.userPwd) == false){
      alert("密码由英文字母下划线组成不能以数字开头6-16位");
      return;
    }
    //2.发送网络请求进行注册
    axios({
      url:'/api/Users/PostRegisterUser',
      method:'post',
      data:{
        UL_Name:state.value.userName,
        UL_Pwd:state.value.userPwd
      }
    })
    .then(res=>{
      //请求成功的回调函数  res
      console.log(res);
      if(res.data.data>0){
        //注册成功跳转到登录页面
        alert("注册成功");
        router.push("/login")
      }else if(res.data.data == -1){
        alert("用户名重复，请换一个名字");
        return;
      }else{
        alert("注册失败");
        return;
      }
      
    })
    .catch(err=>{
      //请求失败处理
      console.log(err);
    })

  }
</script>

<style scoped>

</style>